<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<link rel="stylesheet"
	href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<style type="text/css">
</style>
<script type="text/javascript">
	$(function() {
		$("#datepicker").datepicker({
			dateFormat: 'yy-mm-dd',
			changeMonth : true,
			changeYear : true
		});
			
	});
	$(document).ready(
			function() {
				$('.slider').slider(
						{
							range : true,
							value : 0,
							min : 1,
							max : 100,
							slide : function(event, ui) {
								$("#slider-result").val(
										"$" + ui.values[0] + " - $"
												+ ui.values[1]);
							}
						});
				$("#slider-result").val(
						"$" + $("#slider-range").slider("values", 0) + " - $"
								+ $("#slider-range").slider("values", 1));
				$("#slider-result").val($(".slider").slider("value"));
			});
	/* function checkTitle(len) {
	 /*$('.title-slider').each(function() {
	 title.push($(this).attr('title'));
	 });
	 var capacity = 0;
	 var itemIds = $.makeArray($('.title-slider').map(function () {
	 return $(this).attr('title');
	 }));
	 alert(itemIds.length); 
	 for(var i=0; i<itemIds.length;i++){
	 alert(i);
	 if(itemIds[i] == '1'){
	 capacity = 100;
	
	 }
	 else if(itemIds[i] == '2') {
	 capacity = 200; 
	
	 }
	
	 }
	 } */
	 
function foodcalendarChange(pm) {
		 var date = $("#datepicker").val();
		 var array_data = date.split("-");  // split 함수사용..
		 var s_year = array_data[0];   // 잘라진 값 배열..
		 var s_month = array_data[1];
		 var s_day = array_data[2];
		 
		 if(pm == "up"){
			 s_day++;
		 } 
		 else if(pm == "down")
		 {
			 s_day--;
		 }
		 var foodScheduleStartdate = s_year+'-'+s_month+'-'+s_day;
		 $.ajax({
				url: 'schedule.spring',
				method:'post',
				data:{action:'myFood',foodScheduleStartdate:foodScheduleStartdate},
				success:function(html) {
					$(".parsingPage").html(html);
				},
				error:function(){
					alert("fail");	
				}

			});
	 }
	 
</script>
<div id="sports-information">
	<div>
		<form id="foodScheduleRadioCheck" name="foodScheduleRadioCheck"
			method="post">
			<div id="showping-caption" style="border: 1px solid #bfc5c5;">
				<span style="display: inline-block;"> <a href="javascript:foodcalendarChange('down')"><<</a> <input
					type="text" name=foodScheduleStartdate id="datepicker"
					value="${foodSchedule.foodScheduleStartdate }"
					onchange="javascript:myFood();" /> <a href="javascript:foodcalendarChange('up')">>></a>
				</span>
			</div>
			<div id="showping-contents">
				<table id="insertNode">
					<tr>
						<td>
							<div>
								<span><input id="foodScheduleChoice" type="radio"
									name="foodScheduleChoice" value="B">아침</span>
								<p>아침식사명:${foodScheduleB.foodName }</p>
								<p>칼로리양:${foodScheduleB.foodCalorie }</p>
								<p>
								<c:if test="${foodScheduleB != null }">
									<input type="button" id="scheduleRemove" name="scheduleRemove"
										value="삭제" onclick="javascript:foodScheduleRemove(${foodScheduleB.foodScheduleNo})">
								</c:if>
								</p>
							</div>
							<div>
								<span><input id="foodScheduleChoice" type="radio"
									name="foodScheduleChoice" value="L">점심</span>
								<p>점심식사명:${foodScheduleL.foodName }</p>
								<p>칼로리양:${foodScheduleL.foodCalorie }</p>
								<p>
								<c:if test="${foodScheduleL != null }">
									<input type="button" id="scheduleRemove" name="scheduleRemove"
										value="삭제" onclick="javascript:foodScheduleRemove(${foodScheduleL.foodScheduleNo})">
										</c:if>
								</p>
							</div>
							<div>
								<span><input id="foodScheduleChoice" type="radio"
									name="foodScheduleChoice" value="D">저녁</span>
								<p>저녁식사명:${foodScheduleD.foodName }</p>
								<p>칼로리양:${foodScheduleD.foodCalorie }</p>
								<p>
								<c:if test="${foodScheduleD != null }">
									<input type="button" id="scheduleRemove" name="scheduleRemove"
										value="삭제" onclick="javascript:foodScheduleRemove(${foodScheduleD.foodScheduleNo})">
								</c:if>
								</p>
							</div>
						</td>
					</tr>
					<tr>
						<td>
							<div>
								<div></div>
								<div></div>
							</div>
						</td>
					</tr>
				</table>
			</div>
		</form>
	</div>
</div>
<div id="sports-information1">
	<div id="sports-addArea">
		<h2></h2>
		<div></div>
	</div>
	<div id="cart">
		<dl>
			<dt class="sports-list-caption">종류</dt>
			<dd id="first">
				<ul>
				<li class="food-list"><a
						href="javascript:myfoodchoice(null,null,null);"><span>전체</span></a></li>
					<li class="food-list"><a
						href="javascript:myfoodchoice(null,'한식',null);"><span>한식</span></a></li>
					<li class="food-list"><a
						href="javascript:myfoodchoice(null,'중식',null);"><span>중식</span></a></li>
					<li class="food-list"><a
						href="javascript:myfoodchoice(null,'양식',null);"><span>양식</span></a></li>
					<li class="food-list"><a
						href="javascript:myfoodchoice(null,'간식',null);"><span>간식</span></a></li>
				</ul>
			</dd>
		</dl>
		<dl id="foodS-chedule-Choice">
			<dt class="sports-list-caption">식품</dt>
			<dd id="two">
				<ul>
					<c:forEach var="Classfication" items="${foodClassficationList }">
						<li class="sports-list"><a
							href="javascript:myfoodchoice(null,'${foodchoice.foodClass }', '${Classfication.foodClassfication }');"><span>${Classfication.foodClassfication
									}</span></a></li>
					</c:forEach>
				</ul>
			</dd>
		</dl>
		<dl>
			<dt class="sports-list-caption">성분</dt>
			<dd id="three">
				<ul>
					<li class="slider-li">
						<p class="title-slider" title='1'>칼로리</p>
						<div class="slider"></div>
						<p class="num">0~3000</p>
					</li>
					<li class="slider-li">
						<p class="title-slider" title='2'>탄수화물</p>
						<div class="slider"></div>
						<p class="num">0~350</p>
					</li>
					<li class="slider-li">
						<p class="title-slider" title='3'>단백질</p>
						<div class="slider"></div>
						<p class="num">0~110</p>
					</li>
					<li class="slider-li">
						<p class="title-slider" title='4'>지방</p>
						<div class="slider"></div>
						<p class="num">0~190</p>
					</li>
					<li class="slider-li">
						<p class="title-slider" title='5'>나트륨</p>
						<div class="slider"></div>
						<p class="num">0~40,000</p>
					</li>
					<li class="slider-li">
						<p class="title-slider" title='6'>식이섬유</p>
						<div class="slider"></div>
						<p class="num">0~100</p>
					</li>
					<li class="slider-li">
						<p class="title-slider" title='7'>콜레스테롤</p>
						<div class="slider"></div>
						<p class="num">0~1,500</p>
					</li>
					<li style="width: 100%; height: 67px;"><input type="text"
						id="slider-result"
						style="border: 0; color: #f6931f; font-weight: bold;" /></li>
				</ul>
			</dd>
		</dl>
	</div>
	<div id="sports-div" class="sports-div food"
		style="height: 37%; overflow: auto;">
		<c:forEach var="food" items="${foodlist }">
			<div style="width: 100%; height: 95px;">
				<div id="sports-div-text" style="width: 440px;">
					<table>
						<tr>
							<td rowspan="6" style="width: 70px;">이미지</td>
							<td>
						<tr>
							<td colspan="4" style="width: 300px;">${food.foodName }</td>
							<td rowspan="6" style="width: 70px;"><input type="button"
								id="foodScheduleAdd" name="foodScheduleAdd" value="입력"
								onclick="javascript:foodScheduleAdd(${food.foodNo});"></td>
						</tr>
						<tr>
							<td style="width: 15%;">칼로리</td>
							<td style="width: 15%;">탄수화물</td>
							<td style="width: 15%;">단백질</td>
							<td style="width: 15%;">지방</td>
						</tr>
						<tr>
							<td style="width: 15%;">${food.foodCalorie }Kcal</td>
							<td style="width: 15%;">${food.foodCarbohydrate }g</td>
							<td style="width: 15%;">${food.foodProtein }g</td>
							<td style="width: 15%;">${food.foodFat }g</td>
						</tr>
						<tr>
							<td style="width: 15%;">나트륨</td>
							<td style="width: 15%;">식이섬유</td>
							<td style="width: 15%;">콜레스테롤</td>
							<td style="width: 15%;"></td>
						</tr>
						<tr>
							<td style="width: 15%;">${food.foodNatrium }g</td>
							<td style="width: 15%;">${food.foodCelluloseFiber }g</td>
							<td style="width: 15%;">${food.foodCholesterol }g</td>
							<td style="width: 15%;"></td>
						</tr>
						</td>
						</tr>
					</table>
				</div>
			</div>
		</c:forEach>
	</div>
</div>

<div></div>

